<template>
	<view class="wrap">
		<view class="wrap-accusation">
			<view class="wrap-accusation-title">
				举报内容
			</view>
			<view class="wrap-accusation-content">
				<up-textarea v-model="accusationContent" style="background-color: #F1F1F1;" border="none" count :maxlength="500" autoHeight height="400rpx" placeholder="请详细描述您所遇到的情况，以便客服人员快速为您处理。"></up-textarea>
			</view>
		</view>
		<view class="wrap-accusation">
			<view class="wrap-accusation-title marginBottom">
				图片证据
			</view>
			<view class="wrap-accusation-dec">
				注意：您可以上传6张图片，每张不能超过6M。
			</view>
			<view class="wrap-accusation-upload align-justify-center">
				<view class="wrap-accusation-upload-content align-justify-center" v-for="item in 5" :key="item">
					<up-image src="/static/images/upload.png" width="50rpx" height="50rpx"></up-image>
					<up-image class="wrap-accusation-upload-content-close" src="/static/images/close.png" width="24rpx" height="24rpx" @click="delImg"></up-image>
					<view class="wrap-accusation-upload-content-count">
						0/6
					</view>
				</view>
				<up-upload
					:fileList="fileList6"
					@afterRead="afterRead"
					@delete="deletePic"
					name="6"
					multiple
					:maxCount="1"
					width="250"
					height="150"
				>
					<view class="wrap-accusation-upload-content align-justify-center">
						<up-image src="/static/images/upload.png" width="50rpx" height="50rpx"></up-image>
						<view class="wrap-accusation-upload-content-count">
							0/6
						</view>
					</view>
				</up-upload>
			</view>
		</view>
		<view class="wrap-accusation">
			<view class="wrap-accusation-title marginBottom">
				视频证据
				<text class="wrap-accusation-subTitle">
					(选填)
				</text>
			</view>
			<view class="wrap-accusation-dec">
				注意：您可以上传3个视频，每个不能超过30M。
			</view>
			<view class="wrap-accusation-upload align-justify-center">
				<view class="wrap-accusation-upload-content align-justify-center" v-for="item in 2" :key="item">
					<up-image src="/static/images/upload.png" width="50rpx" height="50rpx"></up-image>
					<up-image class="wrap-accusation-upload-content-close" src="/static/images/close.png" width="24rpx" height="24rpx" @click="delImg"></up-image>
					<view class="wrap-accusation-upload-content-count">
						0/3
					</view>
				</view>
				<up-upload
					:fileList="fileList6"
					@afterRead="afterRead"
					@delete="deletePic"
					name="6"
					multiple
					:maxCount="1"
					width="250"
					height="150"
				>
					<view class="wrap-accusation-upload-content align-justify-center">
						<up-image src="/static/images/upload.png" width="50rpx" height="50rpx"></up-image>
						<view class="wrap-accusation-upload-content-count">
							0/3
						</view>
					</view>
				</up-upload>
			</view>
		</view>
		<view class="wrap-accusation">
			<view class="wrap-accusation-title">
				联系方式
			</view>
			<view class="wrap-accusation-contact">
				<view class="wrap-accusation-contact-list align-justify-space-between">
					<view class="wrap-accusation-contact-list-text">
						您的名字
					</view>
					<view class="wrap-accusation-contact-list-input">
						<up-input
						    placeholder="请填写您的真实姓名"
						    border="none"
						  ></up-input>
					</view>
				</view>
				<view class="wrap-accusation-contact-list align-justify-space-between">
					<view class="wrap-accusation-contact-list-text">
						您的手机号
					</view>
					<view class="wrap-accusation-contact-list-input">
						<up-input
						    placeholder="请填写您的真实手机号"
						    border="none"
						  ></up-input>
					</view>
				</view>
			</view>
		</view>
		<view class="wrap-btn active">
			提交
		</view>
	</view>
</template>

<script setup>
	import { onMounted, ref } from 'vue'
	const accusationContent = ref('')
	const delImg = () => {
	}
	onMounted(()=>{
		uni.enableAlertBeforeUnload({
			message:"是否放弃已输入得内容",
			success:(res)=>{
				console.log(res)
			}
		})
	})
</script>

<style scoped lang="scss">
	.wrap {
		padding: 30rpx 30rpx 180rpx 30rpx;
		box-sizing: border-box;
		
		&-btn{
			width: 690rpx;
			height: 96rpx;
			margin-top: 80rpx;
			text-align: center;
			line-height: 96rpx;
			font-size: 30rpx;
			color: #999999;
			background-color: #D1D1D1;
			border-radius: 200rpx 200rpx 200rpx 200rpx;
			&.active{
				background: #FF47AB;
				color: #FFFFFF;
			}
		}

		&-accusation {
			margin-bottom: 30rpx;
			padding: 40rpx;
			box-sizing: border-box;
			border-radius: 12rpx 12rpx 12rpx 12rpx;
			background-color: #fff;

			&-title {
				margin-bottom: 40rpx;
				font-weight: bold;
				font-size: 34rpx;
				color: #222222;
				&.marginBottom{
					margin-bottom: 30rpx;
				}
			}
			
			&-contact{
				&-list{
					height: 96rpx;
					&-text{
						width: 150rpx;
						margin-right: 40rpx;
						font-size: 30rpx;
						color: #444444;
					}
					&-input{
						flex: 1;
					}
				}
			}
			
			&-subTitle{
				font-size: 22rpx;
				color: #999999;
			}
			
			&-dec{
				margin: -10rpx 0 40rpx 0;
				font-size: 26rpx;
				color: #999999;
			}
			
			&-upload{
				flex-wrap: wrap;
				&-content{
					position: relative;
					width: 190rpx;
					height: 190rpx;
					margin: 0 20rpx 20rpx 0;
					flex-direction: column;
					background-color: #F1F1F1;
					border-radius: 12rpx 12rpx 12rpx 12rpx;
					&:nth-child(3),&:last-child{
						margin-right: 0;
					}
					&:nth-child(4),&:nth-child(5),&:nth-child(6){
						margin-bottom: 0;
					}
					&-count{
						font-size: 22rpx;
						color: #999999;
					}
					&-close{
						position: absolute;
						right: 0;
						top: 0;
					}
				}
			}
			
			&-list{
				height: 96rpx;
				font-size: 30rpx;
				color: #444444;
			}
			
			&-content{
				::v-deep .u-textarea{
					.u-textarea__count{
						background-color: transparent !important;
					}
				}
			}
		}
	}
</style>